<template>
  <div id="file-input"></div>
</template>
<script setup>
// 引入three.js
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import {
  AmbientLight,
  AxesHelper,
  DirectionalLight,
  GridHelper,
  PerspectiveCamera,
  Scene,
  WebGLRenderer,
} from "three";
import { IFCLoader } from "web-ifc-three/IFCLoader";
// 设置IFC加载
const ifcLoader = new IFCLoader();

// 创建三维场景
const scene = new THREE.Scene();

const input = document.getElementById("file-input");
input.addEventListener(
  "change",
  (changed) => {
    console.log(changed);
    const file = changed.target.files[0];
    console.log(file);
    var ifcURL = URL.createObjectURL(file);
    console.log(ifcURL);
    ifcLoader.load(ifcURL, (ifcModel) => scene.add(ifcModel));
  },
  false
);
ifcLoader.ifcManager.setWasmPath("static/wasm/");

// ------------------------------------------------------------------------------------------------
// 创建光源
const pointLight = new THREE.PointLight(0xffffff, 1, 0, 0);
// 设置光源位置
pointLight.position.set(-8, 20, 20);
scene.add(pointLight);

// 光源辅助观察,显示光源位置
const pointLightHelper = new THREE.PointLightHelper(pointLight, 0.2);
scene.add(pointLightHelper);
// // ---------------------------------------------------------------------------------------------------
//环境光:没有特定方向，整体改变场景的光照明暗
const ambient = new THREE.AmbientLight("#f6f7f6", 10);
scene.add(ambient);
// 创建场景的灯光
// const lightColor = 0xffffff;

// const ambientLight = new AmbientLight(lightColor, 0.5);
// scene.add(ambientLight);

// const directionalLight = new DirectionalLight(lightColor, 1);
// directionalLight.position.set(0, 10, 0);
// directionalLight.target.position.set(-5, 0, 0);
// scene.add(directionalLight);
// scene.add(directionalLight.target);

// 30:视场角度, width / height:Canvas画布宽高比, 1:近裁截面, 3000：远裁截面
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  3000
);

// 设置相机位置
camera.position.set(8, 8, 15);
// 设置相机观察目标
camera.lookAt(0, 0, 0);

// 创建渲染器对象
const renderer = new THREE.WebGLRenderer();
// 设置canvas画布尺寸
renderer.setSize(window.innerWidth, window.innerHeight);
// 将画布部署到html元素上
document.body.appendChild(renderer.domElement);

// 添加辅助坐标系
const axesHelper = new THREE.AxesHelper(50);
// 将坐标系添加到场景中
scene.add(axesHelper);

// 在场景中创建网格和坐标轴
const grid = new GridHelper(50, 30);
scene.add(grid);

renderer.setClearColor(0x444444, 1);

// 设置轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
// 设置带阻尼的惯性
controls.enableDamping = true; //鼠标松开不会立刻停下来
// 设置阻尼系数
controls.dampingFactor = 0.05;

// 监听窗口的变化
window.addEventListener("resize", () => {
  // 重置渲染器宽高比
  renderer.setSize(window.innerWidth, window.innerHeight);
  // 重置相机宽高比
  camera.aspect = window.innerWidth / window.innerHeight;
  // 更新相机投影矩阵
  camera.updateProjectionMatrix();
});

// 构建渲染函数
function animate() {
  // 侦听轨道控制器
  controls.update();
  // 请求动画帧函数,辅助实现WebGPU的动画效果
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();
</script>
